<template>
    <el-button class="btn" @click="deleteClass" title="删除用户"><el-icon><Delete/></el-icon>{{ $t('class.Bulkdeletion') }}</el-button>
    <el-dialog v-model="dialogVisible" title="提示" width="30%" >
       <!-- <span>此操作我们将永久删除该数据，是否继续</span> -->
       <span>彻底删除数据，是否继续？</span>
       <template #footer>
         <span class="dialog-footer">
           <el-button @click="dialogVisible = false" >取消</el-button>
           <el-button type="primary" @click="deleteClassBtn">确认</el-button>
         </span>
         
       </template>
     </el-dialog>
   </template>
   <script>
   import { Delete} from '@element-plus/icons-vue';
    export default {
    name: 'DELETE_Class_TABLE',
    props:["classList"],
    components:{
       Delete
    },
   
    data: function(){
    return {
       dialogVisible:false,
       formData:{
           classIds:""
       }
    }
    },
    methods:{
       deleteClass(){
           this.$emit("getSelectData");
           this.dialogVisible = true;
           var that =this; 
           this.formData.classIds="";
           
          
       },
       deleteClassBtn(){
           var that = this;
           this.classList.some(function(item,index){
               that.formData.classIds+=item.classId;
               if(index!== (that.classList.length-1)){
                   that.formData.classIds+=","
               }
           });
           window.http.post('/api/Class/delete',this.formData).then(res => {
               console.info(JSON.stringify(res));
               var data = res.data;
               if(data.success){
                   that.$message.success('删除班级成功');
                   that.$emit("reback");
                   that.dialogVisible = false;
               }else{
                   that.$message.error('删除班级失败');
               } 
           })
           .catch(function(error){
               that.$message.error("服务器异常")
           }); 
       },
    },
    mounted(){
       var that = this;
       this.$bus.on("deleteClassById",function(){
           that.dialogVisible = true;
           that.formData.classIds=""
       })
    },
    unmounted(){
       
       this.$bus.off("deleteClassById");
   
    }
   }
   </script>
   <style>
   html,
    body, 
    #app{
    height: 100%;
    }
   </style>
   <style scoped>
    .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    }
    .tr{
    width: 200px;
    flex-basis: 50px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    background-color: beige;
    align-items: center;
    }
    .second{
    background-color: aqua;
    }
   </style>